<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>jQuery Plugin jBar</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>
		<style>
			body{
				background-color: #211F20;
				font-family:'Lucida Grande',sans-serif;
				color:#777;
				margin:0px;
				padding:20px 0 0 0;
			}
			.content{
				background-color:#fff;
				border:1px solid #ccc;
				-moz-border-radius:10px;
				-webkit-border-radius:10px;
				-khtml-border-radius:10px;
				height:510px;
				width:700px;
				margin: 20px auto;
				padding:0px;
			}
			.content h1{
				background-color:#37B3DF;
				color:#fff;
				padding:5px;
				text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
			}
			.content p{
		        margin:10px 0px 0px 10px;
		        width: 323px;
		        float:left;
		        height:175px;
		        padding:5px 5px 0px 5px;
		        -moz-border-radius:10px;
				-webkit-border-radius:10px;
				-khtml-border-radius:10px;
				background-color:#f0f0f0;
				border:1px solid #ccc;
				font-size: 18px;
				cursor:pointer;
		      }
		    a.button{
		        width:160px;
		        height:45px;
		        color: #ccc; 
		        background:transparent url(button.png) no-repeat center center;
		        float:left;
		        text-decoration:none;
		        line-height:45px;
		        font-weight:bold;
		        margin:10px 0px 0px 80px;
		        text-align:center;
		        clear:both;
		      }
		    a.button:hover{
		        color:#fff;
		        -moz-opacity:0.9;
		        opacity:0.9;
		      }
			.footer{
			  text-align:center;
			  }
			.ad{
				width:730px;
				margin:5px auto;
			}
		</style>
    </head>
    <body>
		<div class="content">
			<h1>jBar - The jQuery notification plugin</h1>
			<p>This is an example of a jBar integration. You can easily configure jBar to be either on top or at the bottom of the page.</p>
			<p>Dismissing the jBar notification can be done by either clicking on it, or clicking on the cross. </p>
			<p>Download the jQuery plugin here: <a href="http://www.tympanus.net/jbar/jbar.zip" class="button">jBar Download</a></p>
			<p>
				<a id="msgup" class="button">Demo Top</a>
				<a id="msgdown" class="button">Demo Bottom</a>
				<a id="msgupwithremove" class="button">Demo Up (Cross)</a>
			</p>
		</div>
		<div class="footer"><a href="http://www.tympanus.net/codrops">Back to Codrops</a></div>
		
	<script src="jquery-1.3.2.js" type="text/javascript"></script>
	<script src="jquery.bar.js" type="text/javascript"></script>
	<script>
		$("#msgup").bar({
			color 			 : '#1E90FF',
			background_color : '#FFFFFF',
			removebutton     : false,
			message			 : 'Your profile customization has been saved!',
			time			 : 4000
		});
		
		
		
		$("#msgdown").bar({
			color 			 : '#FF6600',
			background_color : '#FFFFCC',
			position		 : 'bottom',
			removebutton     : false,
			message			 : 'Your profile customization has been saved!',
			time			 : 4000
		});
		
		
		$("#msgupwithremove").bar({
			message			 : 'There was an error!'
		});
	</script> 	
    </body>
</html>